import React, { useEffect, useState } from 'react'

import MusicList from '@/components/music-list/music-list'

import Api from './api'
import './originalDetail.scss'

const OriginalDetail = (props) => {
  const { match } = props
  const [detail, setDetail] = useState({})
  const [detailMusic, setDetailMusic] = useState([])

  useEffect(() => {
    let { id } = match.params
    Api.getHighqualityDetail(id).then(res => {
      setDetail(res.playlist)
      if (res.playlist.trackIds) {
        let ids = res.playlist.trackIds.map(item => item.id).join()
        Api.getHighqualityMusicDetail(ids).then(musicDetail => {
          const { songs } = musicDetail
          setDetailMusic(songs)
        })
      }
    })
  }, [])

  return (
    <div className='origina-detail'>
      <div className='options'>
        <p>
          <span onClick={() => props.history.goBack()}>{'<'}</span>
          <span className='back'> 歌单</span>
        </p>
        <p> 
          <i className='iconfont icon-sousuo'></i>
          <i className='iconfont icon-dian'></i>
        </p>
      </div>
      <div className='origina-detail-introduce'>
        <img src={detail.coverImgUrl || ''} className='introduce-img' />
        <div className='introduce-name'>
          <p>{ detail.name }</p> 
          <p className='description'>{ detail.description }</p> 
        </div>
      </div>
      <MusicList data={detailMusic} />
    </div>
  )
}

export default OriginalDetail